<template>
  <div class="account_wrapper">
    <account-card :title="accountTitle"/>

    <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="0px" class="safe_tel">
      <el-form-item prop="tel">
        <el-input v-model="formData.tel" placeholder="请输入新手机号" autocomplete="off"></el-input>
      </el-form-item>
      <div class="code_wrapper">
        <el-form-item prop="code">
          <el-input maxlength="6" v-model="formData.code" placeholder="验证码" autocomplete="off"></el-input>
        </el-form-item>

        <div class="code" @click="queryCode">
          {{num>0 ? num+'s' :'验证码' }}
        </div>
      </div>

      <el-form-item>
        <div style="width: 100%">
          <el-button type="primary" style="width: 150px" size="mini" round @click="submitForm('ruleForm')">
            保存
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import AccountCard from "../account/components/AccountCard"
  import {getRegionArea} from "@/api/api"

  export default {
    name: "",
    components: {
      AccountCard
    },
    inject: ['userInfo'],
    data() {
      const validateMail = (rule, value, callback) => {
        if (!value) {
          return callback(`${rule.meg}不能为空`);
        }
        callback();
      }

      return {
        num: 0,
        formData: {
          tel: '',
          code: '',
        },
        rules: {
          tel: [{validator: validateMail, meg: '手机号', trigger: 'blur'}],
          code: [{validator: validateMail, meg: '验证码', trigger: 'blur'}]
        }
      }
    },
    computed: {
      accountTitle() {
        return `当前账号 : ${this.userInfo.mobile}`
      }
    },
    beforeDestroy() {
      clearInterval(this.timer)
    },
    async mounted() {
      await getRegionArea()
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.formData);
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      queryCode() {
        if (this.num > 0) return;

        if (!/^1[3-9][0-9]{9}$/.test(this.formData.tel)) {
          this.$message({
            message: '手机号格式不正确',
            type: 'error'
          })
          return false;
        }

        if (this.userInfo.mobile === this.formData.tel) {
          this.$message({
            message: '修改的手机号不能和当前一样',
            type: 'error'
          })
          return false;
        }
        this.num = 60;
        this.timer = setInterval(() => {
          this.num--;
          if (this.num <= 0) {
            clearInterval(this.timer)
          }
        }, 1000)
      }
    }
  }
</script>

<style scoped lang="scss">
  .account_wrapper {
    ::v-deep .safe_tel {
      width: 50%;
      min-width: 380px;
      margin: 35px auto 0;

      .el-input__inner {
        border-radius: 0 !important;
        border: none;
        border-bottom: 1px solid #DCDFE6;
        padding: 0;
      }
    }

    .code_wrapper {
      position: relative;

      .code {
        -webkit-user-select: none;
        position: absolute;
        bottom: 6px;
        right: 0;
        width: 52px;
        height: 15px;
        background: #EFDEBD;
        border-radius: 8px;
        font-size: 10px;
        font-weight: 500;
        color: #A58041;
        line-height: 15px;
        text-align: center;
        cursor: pointer;
      }
    }

  }
</style>